<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人资料 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .profile-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .page-subtitle {
            color: #666;
            font-size: 14px;
        }

        .profile-content {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 20px;
        }

        .profile-sidebar {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
            height: fit-content;
        }

        .profile-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: white;
            margin: 0 auto 20px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .profile-avatar:hover {
            transform: scale(1.05);
        }

        .profile-avatar img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .profile-name {
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .profile-role {
            text-align: center;
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            margin-bottom: 8px;
            border-radius: 8px;
            text-decoration: none;
            color: #6c757d;
            transition: all 0.3s ease;
        }

        .menu-item:hover {
            background: #f8f9fa;
            color: var(--primary-color);
        }

        .menu-item.active {
            background: #e3f2fd;
            color: var(--primary-color);
        }

        .menu-icon {
            margin-right: 12px;
            font-size: 16px;
        }

        .menu-text {
            font-size: 14px;
            font-weight: 500;
        }

        .profile-main {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            padding: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--neutral-dark);
        }

        .form-group input,
        .form-group select {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease;
        }

        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--primary-color);
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-right: 10px;
        }

        .btn-primary {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary:hover {
            background: var(--primary-dark);
        }

        .btn-secondary {
            background: #6c757d;
            color: white;
        }

        .btn-secondary:hover {
            background: #545b62;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: var(--shadow);
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }

        .hidden {
            display: none;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .error {
            background: #f8d7da;
            color: #721c24;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .success {
            background: #d4edda;
            color: #155724;
            padding: 12px 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        @media (max-width: 768px) {
            .profile-content {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container-fluid">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <a href="index.html" class="navbar-brand">
                    📚 局域网视频学习系统
                </a>
                <div style="display: flex; align-items: center; gap: 20px;">
                    <a href="index.html" style="color: var(--neutral-dark); text-decoration: none;">
                        🏠 首页
                    </a>
                    <a href="favorites.html" style="color: var(--neutral-dark); text-decoration: none;">
                        ❤️ 我的收藏
                    </a>
                    <a href="playlists.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📋 播放列表
                    </a>
                    <a href="exams.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📝 考试中心
                    </a>
                    <a href="profile.html" style="color: var(--neutral-dark); text-decoration: none;">
                        👤 个人资料
                    </a>
                    <span style="color: var(--neutral-dark);">
                        <span data-user-name>学生</span>
                    </span>
                    <button onclick="logout()" class="logout-btn">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="profile-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="page-title">个人资料</div>
                <div class="page-subtitle">管理您的个人信息和学习统计</div>
            </div>

            <div class="profile-content">
                <!-- 侧边栏 -->
                <div class="profile-sidebar">
                    <div class="profile-avatar" onclick="changeAvatar()">
                        <span id="avatarText">👤</span>
                    </div>
                    <div class="profile-name" id="profileName">加载中...</div>
                    <div class="profile-role" id="profileRole">学生</div>
                    
                    <ul class="sidebar-menu">
                        <li>
                            <a href="index.html" class="menu-item">
                                <span class="menu-icon">🏠</span>
                                <span class="menu-text">首页</span>
                            </a>
                        </li>
                        <li>
                            <a href="player.html" class="menu-item">
                                <span class="menu-icon">🎬</span>
                                <span class="menu-text">视频学习</span>
                            </a>
                        </li>
                        <li>
                            <a href="exams.html" class="menu-item">
                                <span class="menu-icon">📝</span>
                                <span class="menu-text">在线考试</span>
                            </a>
                        </li>
                        <li>
                            <a href="playlists.html" class="menu-item">
                                <span class="menu-icon">📚</span>
                                <span class="menu-text">播放列表</span>
                            </a>
                        </li>
                        <li>
                            <a href="favorites.html" class="menu-item">
                                <span class="menu-icon">❤️</span>
                                <span class="menu-text">我的收藏</span>
                            </a>
                        </li>
                        <li>
                            <a href="profile.html" class="menu-item active">
                                <span class="menu-icon">👤</span>
                                <span class="menu-text">个人资料</span>
                            </a>
                        </li>
                    </ul>
                    
                    <!-- 个人资料子菜单 -->
                    <div style="margin-top: 20px; border-top: 1px solid #e9ecef; padding-top: 20px;">
                        <div style="font-size: 14px; font-weight: 600; color: var(--neutral-dark); margin-bottom: 12px;">个人设置</div>
                        <ul class="sidebar-menu">
                            <li>
                                <a href="#" class="menu-item profile-tab" data-tab="profile" onclick="switchTab('profile')">
                                    <span class="menu-icon">👤</span>
                                    <span class="menu-text">个人信息</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="menu-item profile-tab" data-tab="password" onclick="switchTab('password')">
                                    <span class="menu-icon">🔒</span>
                                    <span class="menu-text">修改密码</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 主要内容 -->
                <div class="profile-main">
                    <!-- 个人信息 -->
                    <div id="profileSection">
                        <h3 style="margin-bottom: 20px; color: var(--neutral-dark);">个人信息</h3>
                        <form id="profileForm">
                            <div class="form-group">
                                <label for="username">用户名</label>
                                <input type="text" id="username" name="username" readonly>
                            </div>
                            <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" id="name" name="name">
                            </div>
                            <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" id="email" name="email">
                            </div>
                            <div class="form-group">
                                <label for="phone">手机号</label>
                                <input type="tel" id="phone" name="phone">
                            </div>
                            <div class="form-group">
                                <label for="role">角色</label>
                                <select id="role" name="role" disabled>
                                    <option value="2">学生</option>
                                </select>
                            </div>
                            <div style="margin-top: 20px;">
                                <button type="button" class="btn btn-primary" onclick="saveProfile()">保存修改</button>
                                <button type="button" class="btn btn-secondary" onclick="resetProfile()">重置</button>
                            </div>
                        </form>
                    </div>

                    <!-- 修改密码 -->
                    <div id="passwordSection" class="hidden">
                        <h3 style="margin-bottom: 20px; color: var(--neutral-dark);">修改密码</h3>
                        <form id="passwordForm">
                            <div class="form-group">
                                <label for="currentPassword">当前密码</label>
                                <input type="password" id="currentPassword" name="currentPassword" required>
                            </div>
                            <div class="form-group">
                                <label for="newPassword">新密码</label>
                                <input type="password" id="newPassword" name="newPassword" required>
                            </div>
                            <div class="form-group">
                                <label for="confirmPassword">确认新密码</label>
                                <input type="password" id="confirmPassword" name="confirmPassword" required>
                            </div>
                            <div style="margin-top: 20px;">
                                <button type="button" class="btn btn-primary" onclick="changePassword()">修改密码</button>
                                <button type="button" class="btn btn-secondary" onclick="resetPasswordForm()">重置</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script>
        let currentUser = null;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            checkAuth();
            loadUserProfile();
            // 默认显示个人信息标签页
            switchTab('profile');
        });

        // 检查用户认证状态
        async function checkAuth() {
            await UserManager.init();
            const user = UserManager.getCurrentUser();
            if (!user || user.role !== 2) {
                Message.error('请先登录');
                window.location.href = '../login.html';
                return;
            }
            // 更新用户信息显示
            const userNameElement = document.querySelector('[data-user-name]');
            if (userNameElement) {
                userNameElement.textContent = user.name || user.username;
            }
        }

        // 加载用户资料
        async function loadUserProfile() {
            try {
                const response = await API.get('/user/profile');
                if (response.success && response.user) {
                    currentUser = response.user;
                    updateProfileDisplay();
                } else {
                    Message.error('加载用户信息失败');
                }
            } catch (error) {
                console.error('加载用户信息失败:', error);
                Message.error('加载用户信息失败，请稍后重试');
            }
        }

        // 更新资料显示
        function updateProfileDisplay() {
            if (!currentUser) return;

            document.getElementById('profileName').textContent = currentUser.name || currentUser.username;
            document.getElementById('profileRole').textContent = '学生';
            document.getElementById('username').value = currentUser.username || '';
            document.getElementById('name').value = currentUser.name || '';
            document.getElementById('email').value = currentUser.email || '';
            document.getElementById('phone').value = currentUser.phone || '';
            document.getElementById('role').value = currentUser.role || 2;
        }


        // 保存资料
        async function saveProfile() {
            try {
                const formData = {
                    name: document.getElementById('name').value,
                    email: document.getElementById('email').value,
                    phone: document.getElementById('phone').value
                };

                const response = await API.put('/user/profile', formData);
                if (response.success) {
                    Message.success('资料保存成功');
                    await loadUserProfile();
                } else {
                    Message.error(response.message || '保存失败');
                }
            } catch (error) {
                console.error('保存资料失败:', error);
                Message.error('保存失败，请稍后重试');
            }
        }

        // 重置资料表单
        function resetProfile() {
            updateProfileDisplay();
        }

        // 修改密码
        async function changePassword() {
            try {
                const currentPassword = document.getElementById('currentPassword').value;
                const newPassword = document.getElementById('newPassword').value;
                const confirmPassword = document.getElementById('confirmPassword').value;

                if (newPassword !== confirmPassword) {
                    Message.error('两次输入的密码不一致');
                    return;
                }

                if (newPassword.length < 6) {
                    Message.error('新密码长度不能少于6位');
                    return;
                }

                const formData = {
                    oldPassword: currentPassword,
                    newPassword: newPassword,
                    confirmPassword: confirmPassword
                };

                const response = await API.put('/user/change-password', formData);
                if (response.success) {
                    Message.success('密码修改成功');
                    resetPasswordForm();
                } else {
                    Message.error(response.message || '密码修改失败');
                }
            } catch (error) {
                console.error('修改密码失败:', error);
                Message.error('修改密码失败，请稍后重试');
            }
        }

        // 重置密码表单
        function resetPasswordForm() {
            document.getElementById('currentPassword').value = '';
            document.getElementById('newPassword').value = '';
            document.getElementById('confirmPassword').value = '';
        }

        // 切换标签页
        function switchTab(tabName) {
            // 隐藏所有内容区域
            document.getElementById('profileSection').classList.add('hidden');
            document.getElementById('passwordSection').classList.add('hidden');
            
            // 移除所有标签页的活跃状态
            document.querySelectorAll('.profile-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的内容区域
            if (tabName === 'profile') {
                document.getElementById('profileSection').classList.remove('hidden');
                document.querySelector('[data-tab="profile"]').classList.add('active');
            } else if (tabName === 'password') {
                document.getElementById('passwordSection').classList.remove('hidden');
                document.querySelector('[data-tab="password"]').classList.add('active');
            }
        }

        // 更换头像
        function changeAvatar() {
            Message.info('头像更换功能开发中...');
        }

        // 退出登录
        async function logout() {
            if (confirm('确定要退出登录吗？')) {
                try {
                    UserManager.logout();
                    window.location.href = '../login.html';
                } catch (error) {
                    console.error('退出登录失败:', error);
                    Message.error('退出登录失败');
                }
            }
        }
    </script>
</body>
</html>